<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Package Helper</title>
</head>
<style>
    *{
    	margin:0;
    	padding:0;
    	box-sizing:border-box;
    	cursor: pointer;
    }
    div{
    	/*border:1px solid red;*/
    }
	#head{
		height: 60px;
		width:100%;
		background:#363636;
		position: relative;
		
	}
	#content{
		position: relative;
	}
	#content_left{
		color:#0a0a0a;         /*一级菜单字体颜色设置*/
		width:350px;
        height:100%;
		background: #eee;
		overflow: auto;
		padding-top:10px;       /*一级菜单距离上边内边距 */
        positon=absolute;
        

	}
	#content_right{
		display: block;
		border: 0;
		height:100%;
		position: absolute;
		left: 350px;
		top: 0;
		background: #fff;
	}
	h3{
		padding-left: 50px;             /*标题*/
		height: 100%;
		color:#c8c8c8;
		font: 50px "Arial";      /*"Chaparral Pro";   Candara*/
        font-weight:bold;
	}
	ul{
		list-style: none;
	}
	#head_right{
		position: absolute;
		right: 10px;
		bottom:15px;
		height: 30px;
		float: right;
	}
	#head_right>input{             /*搜索框*/
		width: 200px;
		height: 100%;
		border-radius: 50px;
		text-align: center;
		border:0;
		float:left;
	}
	#head_right>img{
		float: left;
		height: 100%;
		margin-left: 5px;
	}
    .itemGrp{padding:2px 0 2px 0px; color:rgb(100,100,100);}
    .itemGrp:hover{background-color: rgba(0, 140, 210,0.2);}
    .item{padding:2px 0 2px 35px; font-weight:bold;}
    .item:hover{background-color: rgba(0, 140, 210,0.2); }
    .itemSelected{background: rgb(0,140, 255);padding:2px 0 2px 35px; color:rgb(255,255,255); font-weight:bold;}


</style>
<body>
	<div id="head">
		<h3 id="logoName" style="text-transform:capitalize;"></h3>
		<div id="head_right">
			<input type="text">
			<img src="../../image/cha.png" id="img1">
		</div>
        
		<span id="go" style="position: absolute;bottom: 13px;left:10px;color: #fff;">
        <a href="../../index.html">
        <img src="../../image/cha.png" id="img1">
        </a>
        </span>
	</div>
	<div id="content">
		<div id="content_left" ></div>
		<iframe id="content_right" src=""></iframe>
	</div>
</body>
</html>

<script>
    //class获取DOM封装函数
	function getclass(p,s){
		var arr=[];
		var ae=p.getElementsByTagName("*");
		for(var i=0;i<ae.length;i++){
			if(ae[i].className==s){
				arr.push(ae[i]);
			}
		}
		return arr;
	};
   //获取对象元素个数封装函数
	function len(obj){
		var nn=0;
		for (var i in obj){
			nn++;
		};
		return nn;
	};

	var re=eval("/"+" "+"*/g");                            //正则式，匹配所有空字符

	var head=document.getElementById("head");  
	var content=document.getElementById("content");                    
	var content_left=document.getElementById("content_left");
	var content_right=document.getElementById("content_right");
	var logoLabel=document.getElementById("logoName");

    //初始化
	var y=true;
	function _init(){
		var  wid=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var  hei=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		var  head_height=head.offsetHeight;  
		var  leftwid=content_left.offsetWidth; 
        content_left.path='none';
		content.style.height=(hei-head_height)+"px";
		if(y){
			content_right.style.width=(wid-leftwid)+"px";
		}else{
			content_right.style.width=wid+"px";
		}
        // logo name
        var index_path = window.location.href;
        var index_part = index_path.split('/')
        logoLabel.innerHTML = index_part[index_part.length-2];
	}
	_init();
	window.onresize=function(){
		_init();
	}
    
</script>

<!--  加载配置数据：configData  -->
<script src="config.js"></script>

<!--  函数定义  -->
<script>
    <!-- var selItem = false; -->
    currentItem = null;
    // 闭包函数：鼠标点击事件（实现点击可传值功能）
    function onClicked(item, image){
        return function(){
                    if(image){
                        // 组点击
                        if(item.style.display=="none"){
                            item.style.display="";
                            image.src="../../image/open.png";
                        }else{
                            item.style.display="none";
                            image.src="../../image/close.png";
                        }
                    }else{
                        // 链接项点击
                        if(currentItem){
                            currentItem.className = 'item';
                        }
                            
                        <!-- alert(currentItem); -->
                        item.className = 'itemSelected';
                        content_right.src=item.path+'/'+item.innerHTML+".html";
                        currentItem = item;
                        <!-- alert(content_right.document); -->
                    }
                    <!-- if(selItem){ -->
                        <!-- alert(selItem.path+'/'+selItem.innerHTML+".html"); -->
                    <!-- } -->
                    <!-- selItem = item; -->
                        
                }
    }
    
    // 创建可展开组函数
    function parentItem(content, text, num){
		var odiv=document.createElement("div");             
		var odiv2=document.createElement("div");
		var image=document.createElement("img");
		var span=document.createElement("span");
		var count=document.createElement("span");
		var oul=document.createElement("ul");
        odiv2.className="itemGrp";
        image.src="../../image/close.png";
        image.style.height = "15px";
        image.style.width = "15px";
        span.innerHTML=text;    
        count.innerHTML="( "+num+" )";
        count.style.margin = "0 0 0 10px";
        count.style.color = "rgba(255,0,0,0.3)";
        oul.style.display="none";
        if (content.path == 'none'){
            oul.path=text;
        }else{
            oul.path=content.path + '/'+text;
        }
        
        odiv2.appendChild(image);
        odiv2.appendChild(span);
        odiv2.appendChild(count);
        odiv.appendChild(odiv2);
        odiv.appendChild(oul);
        odiv.style.padding = "0px 0px 0px 20px";
        content.appendChild(odiv);
        //odiv2.onclick=new Function("expanded(" + odiv2 + ");");
        odiv2.onclick=onClicked(oul, image);
        return oul
    }
    
    // 创建链接项函数
    function childItem(content, text){            
        var oli=document.createElement("li");
        oli.innerHTML=text;   
        oli.className = 'item'
        content.appendChild(oli);
        oli.path = content.path;
        oli.onclick = onClicked(oli, false)
    }
    
    // 获取数据类型
    var gettype=Object.prototype.toString;
    /*
    "[object String]"   字符串
    "[object Object]"   字典
    "[object Array]"    列表
    */
    
    // 递归函数：解析数据创建，支持两种数据类型（字典、列表）
    function configPaser(data, content){
        if (gettype.call(data) == "[object Object]"){
            
            for(var key in data){
                value = data[key];
                var num = Object.keys(data[key]).length;
                parent = parentItem(content, key, num);
                if (gettype.call(value) == "[object Array]"){
                    configPaser(value, parent);
                }
            }
        }else if(gettype.call(data) == "[object Array]"){
            for( var subvalue of data){
                if (gettype.call(subvalue) == "[object Object]"){
                    // 创建组
                    configPaser(subvalue, content);
                }else{
                    // 创建链接项
                    childItem(content, subvalue);
                }
            }
        }

    }
 
	
    // 数据函数调用，构建UI
    configPaser(configData, content_left); 
	
	
</script>

<!--<script type="text/javascript" src="require.js"></script-->
